<template>
    <div
        class="hisBillChecked"
        v-loading="isLoading"
        element-loading-background="rgba(250, 250, 250, 0.7)"
    >
        <cardComponent :pageTitle="`查询服务类-卡片信用历史查询`">
            <template slot="cardBody">
                <!-- 已出账单查询 -->
                <div>
                    <el-form
                        ref="formData"
                        :model="formData"
                        size="small"
                        :inline="true"
                        label-position="right"
                        :rules="rules"
                        label-width="120px"
                    >
                        <el-row>
                            <el-form-item label="时间:">
                                <el-select v-model="formData.months">
                                    <el-option
                                        v-for="(item, index) in dateList"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="币种:">
                                <el-select v-model="formData.currency" disabled>
                                    <el-option label="第一币种" value="L"></el-option>
                                    <el-option label="第二币种" value="I"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-button
                                class="btmstyle"
                                type="primary"
                                size="small"
                                @click="searchData"
                            >查询</el-button>
                        </el-row>
                    </el-form>
                </div>
                <div v-show="showFlag">
                    <el-table
                        class="heard-bg business_table"
                        border
                        stripe
                        :data="tableData"
                        width="100%"
                    >
                        <el-table-column :label="masg">
                            <el-table-column label="账单日期">
                                <template slot-scope="scope">
                                    <span
                                        @click="handleViewDetail(scope.row)"
                                        style="cursor: pointer;color: #409EFF;"
                                    >{{scope.row.CLOSEDAY | formatDate}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="账单金额">
                                <template slot-scope="scope">
                                    <span>{{scope.row.BALFLAG}}{{scope.row.CLOSEBAL}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="最低还款额">
                                <template slot-scope="scope">
                                    <span>+{{scope.row.MINDUE}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="到期还款日">
                                <template slot-scope="scope">
                                    <span>{{scope.row.CLOSEDAY | getNewDay(ODUETIME)}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="消费笔数" prop="PURCHNBR"></el-table-column>
                            <el-table-column label="逾期金额">
                                <template slot-scope="scope">
                                    <span>+{{scope.row.ODUE}}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-show="!showFlag">
                    <el-card shadow="never" style="margin-bottom: 20px;">
                        <div slot="headerss" class="clearfix">
                            <span>
                                <!-- <strong>人民币 账单（账单年月：26-08 账户类别: 个人卡账户 ）</strong> masg2-->
                                <strong>{{masg2}}</strong>
                            </span>
                        </div>
                        <div class="arrearsQueryMain">
                            <el-form
                                ref="rowObjformRef"
                                :model="rowObj"
                                label-width="120px"
                                size="mini"
                            >
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="本期应还金额 : ">
                                            <el-input
                                                disabled
                                                v-model="rowObj.AMOUNT"
                                                style="width: 90%; border: none"
                                            ></el-input>
                                        </el-form-item>
                                        <!-- <span class="queryMainLeft">本期应还金额：</span>
                                        <span class="queryMainLeft">{{rowObj.AMOUNT}}</span>-->
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="最低还款额 : ">
                                            <el-input
                                                disabled
                                                v-model="rowObj.MINPAY"
                                                style="width: 90%; border: none"
                                            ></el-input>
                                        </el-form-item>
                                        <!-- <span class="queryMainLeft">	最低还款额：</span>
                                        {{rowObj.MINPAY}}-->
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="本期账单金额 : ">
                                            <el-input
                                                disabled
                                                v-model="rowObj.STMTAMT"
                                                style="width: 90%; border: none"
                                            ></el-input>
                                        </el-form-item>
                                        <!-- <span class="queryMainLeft">本期账单金额：</span>
                                        <span class="queryMainLeft">{{rowObj.STMTFLAG}}{{rowObj.STMTAMT}}</span>-->
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="到期还款日 : ">
                                            <el-input
                                                disabled
                                                :value="rowObj.CLOSEDAY | getNewDay(ODUETIME)"
                                                style="width: 90%; border: none"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="上期账单金额 : ">
                                            <el-input
                                                disabled
                                                :value="rowObj.OPENFLAG=== '+' ?rowObj.OPENAMT:rowObj.OPENFLAG + rowObj.OPENAMT"
                                                style="width: 90%; border: none"
                                            ></el-input>
                                        </el-form-item>
                                        <!-- <span class="queryMainLeft">上期账单金额：</span>
                                        <span class="queryMainLeft">{{rowObj.OPENFLAG}}{{rowObj.OPENAMT}}</span>-->
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="已还款金额 : ">
                                            <el-input
                                                disabled
                                                v-model="rowObj.PAYED"
                                                style="width: 90%; border: none"
                                            ></el-input>
                                        </el-form-item>
                                        <!-- <span class="queryMainLeft">	已还款金额：</span>
                                        <span class="queryMainLeft">{{rowObj.PAYED}}</span>-->
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="本期新增账款 : ">
                                            <el-input
                                                disabled
                                                v-model="billamt"
                                                style="width: 90%; border: none"
                                            ></el-input>
                                        </el-form-item>
                                        <!-- <span class="queryMainLeft">本期新增账款：</span>
                                        <span class="queryMainLeft">{{billamt}}</span>-->
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="本期调整金额 : ">
                                            <el-input
                                                disabled
                                                :value="rowObj.ADJFLAG=='+'? rowObj.ADJUSTMENT:rowObj.ADJFLAG + rowObj.ADJUSTMENT"
                                                style="width: 90%; border: none"
                                            ></el-input>
                                        </el-form-item>
                                        <!-- <span class="queryMainLeft">	本期调整金额：</span>
                                        <span class="queryMainLeft">{{rowObj.ADJFLAG}}{{rowObj.ADJUSTMENT}}</span>-->
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="循环利息 : ">
                                            <el-input
                                                disabled
                                                v-model="rowObj.CREDITINST"
                                                style="width: 90%; border: none"
                                            ></el-input>
                                        </el-form-item>
                                        <!-- <span class="queryMainLeft">循环利息：</span>
                                        <span class="queryMainLeft">{{rowObj.CREDITINST}}</span>-->
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item style="margin-bottom: 0;" label="计算规则 : ">
                                            <el-input
                                                disabled
                                                value="本期账单金额 ＝ 上期账单金额 － 已还款金额 ＋ 本期新增账款 ＋ 本期调整金额 ＋ 循环利息"
                                                style="width: 97.5%; border: none"
                                            ></el-input>
                                        </el-form-item>
                                        <!-- <span class="queryMainLeft">	计算规则：</span>
                                        <span class="queryMainLeft">本期账单金额＝上期账单金额－已还款金额＋本期新增账款＋本期调整金额＋循环利息</span>-->
                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                    </el-card>

                    <!-- <div class="tableTitle">人民币账单</div> -->

                    <el-table
                        class="heard-bg business_table"
                        :data="detailData"
                        @current-change="handleCurrentChange"
                        border
                        stripe
                        width="100%"
                    >
                        <el-table-column label width="35">
                            <template slot-scope="scope">
                                <el-radio v-model="isChecked" :label="scope.row">{{""}}</el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="交易日期时间"
                            show-overflow-tooltip
                            min-width="120"
                            v-if="nextFlag"
                        >
                            <template slot-scope="scope">
                                <span>{{ scope.row.PURTIME | getFormatDate(scope.row.VALDATE+'', scope.row.PURDATE1+'') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="交易日期时间"
                            show-overflow-tooltip
                            min-width="120"
                            v-else
                        >
                            <template slot-scope="scope">
                                <span>{{ scope.row.PURTIME | getFormatDate(scope.row.VALDATE+'', scope.row.PURDATE1+'') }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="记账日" min-width="75" v-if="nextFlag">
                            <template slot-scope="scope">
                                <span>{{scope.row.PURDATE | formatDate}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="记账日" min-width="75" v-else>
                            <template slot-scope="scope">
                                <span>{{scope.row.PURDATE8 | formatDate}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="交易描述" show-overflow-tooltip min-width="150">
                            <template slot-scope="scope">
                                <span>{{scope.row.DESLINE1 || ""}} &nbsp; {{scope.row.DESLINE2 || ""}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="交易类型" prop="TRANTYPE_1" min-width="150"></el-table-column>
                        <el-table-column label="商户类型代码" prop="MCC" min-width="75"></el-table-column>
                        <el-table-column label="交易金额" prop="AMOUNT" min-width="75"></el-table-column>
                        <el-table-column label="授权号码" prop="AUTHCODE" min-width="60"></el-table-column>
                        <el-table-column label="卡号末四位" min-width="68">
                            <template slot-scope="scope">
                                <span>{{scope.row.CARDEND | formatCardend}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="footer">
                        <!--<el-button type="primary" size="small" @click="choice()">争议账款工单</el-button>-->
                        <!-- <el-button type="primary" plain size="small" @click="stmtapp()">账单分期申请</el-button>
                        <el-button type="primary" plain size="small" @click="setqry()">账单寄送方式</el-button>
                        <el-button type="primary" plain size="small" @click="zxmrapp()">补印账单申请</el-button>
                        <el-button type="primary" size="small" @click="sendMsg()">发送短信</el-button>-->
                        <el-button size="small" @click="goBack()">返 回</el-button>
                        <el-button
                            :disabled="currentPageIndex <= 0"
                            type="primary"
                            size="small"
                            @click="handleChangePage('pre')"
                        >上一页</el-button>
                        <el-button
                            :disabled="nextButtonFlag"
                            type="primary"
                            size="small"
                            @click="handleChangePage('next')"
                        >下一页</el-button>
                    </div>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import {
    getAccountTypeName,
    getDictSelectList,
    myMoment,
} from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { get_4xxx, get_3xxx } from '@/apis/getAPIClass';
import { isEmptyObject, ChangePage } from '@/utils/Object';
import { getToken, getTokenHsbankNo } from '@/utils/auth';
export default {
    name: 'hisBillChecked',
    data() {
        return {
            formData: {

                months: '0', // 授权号
                currency: 'L',
            },
            bnknbr: getTokenHsbankNo('HsbankNo'),
            ITEMCM: '',
            // 表格内容
            tableData: [],
            detailData: [],
            dateFlag: 0,
            currentApprefIndex: '', // 当前页最后一条记录的申请编号的索引
            nextButtonFlag: true, // ‘下一页’  按钮的显示控制阀
            pagingDataList: [], // 翻页上送字段列表
            currentPageIndex: 0, // 当前页索引
            showFlag: true,
            rowObj: {},
            billamt: '0.00',
            isChecked: {},
            ODUETIME: '25',
            option: 'L',
            masg2: '',
            TRANTYPEList: [],
            result_3053: '',
            masg: '6个月内账单',
            TRANYM: '',
            currentRow: null,
            VALDATE: '',
            PURDATE: '',
            PURTIME: '',
            TRANNO: '',
            nextFlag: true,
            PURDATE8: '',
            isLoading: false,
            totalSumMap: {
                zzdqk: 0,
                zzdzdhke: 0,
                zxfbs: 0,
                yczdzyqje: 0,
            },
            currentZd: {},
            dateList: [
                {
                    label: '6个月内',
                    value: '0',
                },
                {
                    label: '7-12个月',
                    value: '1',
                },
                {
                    label: '13-18个月',
                    value: '2',
                },
                {
                    label: '19-24个月',
                    value: '3',
                },
            ],
        };
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601, // 卡列表数据
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
        multiAccounts: state => state.common.AccountionTYPE_INFO,
    }),
    async created() {

        // 调用3054接口，查询已出账单列表
        this.getData();

        // 计算多账户累加数据 3054
        this.calTotalSum();
        // 获取账户类型
        this.ITEMCM = await getAccountTypeName(
            this.cardList_3601,
            this.cardInfo_3004,
            this,
        ) || this.cardInfo_3004.CATEGORY;
        this.TRANTYPEList = await getDictSelectList('TRANS_TYPE', this);
        const params = {
            cfgNo: '9034',
            bankNum: getTokenHsbankNo('HsbankNo'),
            sect: '0000',
        };
        this.$post.dictDetail.queryConfig(params).then((res) => {
            if (res.data.content) {
                this.ODUETIME = res.data.content.cfgEdit || 25;
            }
        });
    },

    async mounted() {
        // 计算多账户总金额信息
        //this.calTotalSum();
    },

    methods: {

        calTotalSum() {

            // 总消费金额 总还款金额 总取现金额 总取现手续费金额
            this.multiAccounts.forEach(item => {

                this.getAccountSum(item.CARDNBR);

            });

        },

        // 根据卡号查询账户下账单信息列表
        getAccountSum(cardNo) {

            const appBody_3054 = {
                CARDNBR: cardNo, // 卡号
                OPTION: 'L',
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                QUERY: '0',
            };
            const params_3054 = JSON.parse(JSON.stringify(this.defaultParams));
            params_3054.body.appHead.tranCode = '3054';
            params_3054.body.appBody = appBody_3054;

            this.$post.common.transPort(params_3054).then((res) => {

                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') {

                        let tableList = result.body.appBody.dataList || [];

                        if (tableList.length > 0) {

                            let zdqk = tableList[0].BALFLAG + tableList[0].CLOSEBAL;
                            let zdhke = tableList[0].MINDUE;
                            let xfbs = tableList[0].PURCHNBR;
                            let yqje = tableList[0].ODUE;

                            this.totalSumMap.zzdqk = (parseFloat(this.totalSumMap.zzdqk) + parseFloat(zdqk)).toFixed(2);
                            this.totalSumMap.zzdzdhke = (parseFloat(this.totalSumMap.zzdzdhke) + parseFloat(zdhke)).toFixed(2);
                            this.totalSumMap.zxfbs = parseFloat(this.totalSumMap.zxfbs) + parseFloat(xfbs);
                            this.totalSumMap.yczdzyqje = (parseFloat(this.totalSumMap.yczdzyqje) + parseFloat(yqje)).toFixed(2);

                        }

                    } else {

                    }
                } else {

                }
            });

        },

        // 点击账单日期，调用3005 查询信用卡账单头信息，调用3006 查询信用卡账单明细
        // 调用3091 查询历史信用卡账单头信息，调用3092 查询历史信用卡账单明细 
        async handleViewDetail(val) {
            this.isLoading = true;
            // console.log(val)
            this.TRANYM = (`${val.CLOSEDAY}`).substr(2, 4);
            this.defaultParams.sysHead.busiName = '信用卡账单明细查询';
            // 3005 配置请求头
            const appBody_3005 = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                TRANYM: this.TRANYM,
                OPTION: this.option,
                PINFLAG: this.defaultpinFlag,
            };
            // 当前1-6个月
            if (this.nextFlag) {
                const defaultParams_3005 = JSON.parse(JSON.stringify(this.defaultParams));
                defaultParams_3005.body.appHead.tranCode = '3005';
                defaultParams_3005.body.appHead.source = 'AG';
                defaultParams_3005.body.appBody = appBody_3005;
                this.$post.common.transPort(defaultParams_3005).then((res) => {
                    if (res.status === 200) {
                        const result = JSON.parse(res.data.jsonRes);
                        if (result.sysHead.rspCd === '000000') {
                            this.rowObj = { ...result.body.appBody, ...val };
                            console.log(this.rowObj, result, val);
                            const openflag = this.rowObj.OPENFLAG;
                            let openamt = this.rowObj.OPENAMT; // 上期欠款金额
                            const adjflag = this.rowObj.ADJFLAG;
                            let adjustment = this.rowObj.ADJUSTMENT; // 本期调整金额
                            const stmtflag = this.rowObj.STMTFLAG;
                            let stmtamt = this.rowObj.STMTAMT; // 本期欠款金额
                            const payed = this.rowObj.PAYED; // 还款金额
                            const creditinst = this.rowObj.CREDITINST; // 循环利息

                            if (openflag === '-') {
                                openamt *= -1;
                            }
                            if (adjflag === '-') {
                                adjustment *= -1;
                            }
                            if (stmtflag === '-') {
                                stmtamt *= -1;
                            }

                            // 上期欠款金额－还款金额＋本期账单金额＋本期调整金额＋循环利息＝本期欠款金额
                            // 计算本期账单金额
                            this.billamt = parseFloat(stmtamt)
                                - parseFloat(creditinst)
                                - parseFloat(adjustment)
                                + parseFloat(payed)
                                - parseFloat(openamt);
                            this.billamt = this.billamt.toFixed(2);

                            this.masg2 = `${this.rowObj.OPTION == 'L' ? '人民币' : '美元'
                                } 账单（账单年月：${moment(`${val.CLOSEDAY}`).format(
                                    'YY-MM',
                                )}    账户类别: ${this.ITEMCM} ）`;
                        }
                    }
                });
                // 请求3006接口
                console.log(this.TRANYM);
                await this.get_3006('3006');
            } else {
                // 历史账单
                const defaultParams_3005 = JSON.parse(
                    JSON.stringify(this.defaultParams),
                );
                defaultParams_3005.body.appHead.tranCode = '3091';
                defaultParams_3005.body.appHead.source = 'AG';
                defaultParams_3005.body.appBody = appBody_3005;
                this.$post.common.transPort(defaultParams_3005).then((res) => {
                    if (res.status === 200) {
                        const result = JSON.parse(res.data.jsonRes);
                        if (result.sysHead.rspCd === '000000') {
                            this.rowObj = { ...result.body.appBody, ...val };
                            console.log(this.rowObj, result, val);
                            const openflag = this.rowObj.OPENFLAG;
                            let openamt = this.rowObj.OPENAMT; // 上期欠款金额
                            const adjflag = this.rowObj.ADJFLAG;
                            let adjustment = this.rowObj.ADJUSTMENT; // 本期调整金额
                            const stmtflag = this.rowObj.STMTFLAG;
                            let stmtamt = this.rowObj.STMTAMT; // 本期欠款金额
                            const payed = this.rowObj.PAYED; // 还款金额
                            const creditinst = this.rowObj.CREDITINST; // 循环利息

                            if (openflag === '-') {
                                openamt *= -1;
                            }
                            if (adjflag === '-') {
                                adjustment *= -1;
                            }
                            if (stmtflag === '-') {
                                stmtamt *= -1;
                            }

                            // 上期欠款金额－还款金额＋本期账单金额＋本期调整金额＋循环利息＝本期欠款金额
                            // 计算本期账单金额
                            this.billamt = parseFloat(stmtamt)
                                - parseFloat(creditinst)
                                - parseFloat(adjustment)
                                + parseFloat(payed)
                                - parseFloat(openamt);
                            this.billamt = this.billamt.toFixed(2);

                            this.masg2 = `${this.rowObj.OPTION == 'L' ? '人民币' : '美元'
                                } 账单（账单年月：${moment(`${val.CLOSEDAY}`).format(
                                    'YY-MM',
                                )}    账户类别: ${this.ITEMCM} ）`;
                        }
                    }
                });
                await this.get_3006('3092');
            }
            if (this.detailData != []) {
                this.showFlag = false;
            }


        },
        async get_3006(a) {
            // 3006 配置请求头
            this.isLoading = true;
            const appBody_3006 = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                TRANYM: this.TRANYM, // 账单年月YYMM，当送零时，系统默认查询账户当前月份-1，即最近一期账单月的账单
                OPTION: this.option, // 币种选项
                PINFLAG: this.defaultpinFlag,
                RTNIND: this.pagingDataList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                ENQFLAG: 0, // 0：返回账户交易明细，默认方式；1：按查询卡号返回交易明细
                VALDATE: this.VALDATE,
                PURDATE: this.PURDATE || this.PURDATE8,
                PURTIME: this.PURTIME,
                TRANNO: this.TRANNO,
            };

            let bool = false;
            if (this.pagingDataList.length === 0) bool = true;
            const result = await get_3xxx(
                a,
                '已出账单明细查询',
                appBody_3006,
                this,
                true,
                bool,
            );
            this.isLoading = false;
            if (!result) {
                if (this.pagingDataList.length != 0) {
                    this.$message.warning('已经到最后一条数据');
                } else {
                    this.detailData = [];
                }
                this.nextButtonFlag = true;
                return false;
            }

            const res = result.body.appBody.dataList;
            res.forEach((e) => {
                e.TRANTYPE_1 = e.TRANTYPE;
                // 设置分期付款类型
                this.TRANTYPEList.forEach((i) => {
                    if ((`${e.TRANTYPE}`).trim() == i.code) {
                        e.TRANTYPE_1 = `${i.code} ${i.label}`;
                    }
                });
            });
            console.log(res, 'res');
            this.detailData = res;

            // 设置下一页分页设置VALDATE
            if (this.nextFlag) {
                ChangePage(
                    this,
                    ['VALDATE', 'PURDATE', 'PURTIME', 'TRANNO'],
                    'detailData',
                );
            } else {
                ChangePage(
                    this,
                    ['VALDATE', 'PURDATE8', 'PURTIME', 'TRANNO'],
                    'detailData',
                );
            }
        },
        // 争议账款工单
        choice() {
            if (isEmptyObject(this.isChecked)) {
                this.$alert('请选择交易流水！', '提示', {
                    customClass: 'warning', type: 'warning',
                });
            }
        },
        // 账单分期申请
        stmtapp() {
            this.$router.push('/instalment/statement');
        },
        // 账单寄送方式
        setqry() {
            this.$router.push('/operationDeals/BillDeliveryAddress');
        },
        // 补印账单申请
        zxmrapp() {
            this.$router.push('/operationDeals/ReprintBillApplyFor');
        },
        // 发送短信
        sendMsg() {
            const DUEDATE = this.rowObj.DUEDATE === '99999999' ? '见单即付' : `${this.rowObj.DUEDATE.substring(0, 4)}/${this.rowObj.DUEDATE.substring(4, 6)}/${this.rowObj.DUEDATE.substring(6, 8)}`;
            const TAG = this.option === 'L' ? '元' : '美元';
            const TRANYM = this.rowObj.CLOSEDAY.toString();
            const YEAR = `${TRANYM.substring(0, 4)}`;
            const MONTH = `${TRANYM.substring(4, 6)}`;
            const tempContent = `${YEAR}年${MONTH}月本期应还：${this.rowObj.AMOUNT}${TAG}，最低还款：${this.rowObj.MINPAY}${TAG}，到期还款日：${DUEDATE}`;
            this.$router.push({
                name: 'dynamicMessage',
                path: '/index/dynamicMessage',
                params: {
                    tempName: '已出账单明细查询',
                    tempContent,
                },
            });
        },
        // 点击返回
        goBack() {
            this.showFlag = true;
            this.pagingDataList = [];
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        // 上下页切换
        handleChangePage(type) {
            this.isLoading = true;
            this.currentRow = null;
            if (type === 'pre') {
                // 切换到上一页
                if (this.currentPageIndex - 2 < 0) {
                    this.pagingDataList = []; // 清空缓存 申请编号 -> 相当于首次查询
                    this.VALDATE = '';
                    this.PURDATE = '';
                    this.PURTIME = '';
                    this.TRANNO = '';
                } else {
                    this.currentPageIndex = this.currentPageIndex - 2;
                    this.VALDATE = this.pagingDataList[this.currentPageIndex].VALDATE;
                    this.PURDATE = this.pagingDataList[this.currentPageIndex].PURDATE;
                    this.PURTIME = this.pagingDataList[this.currentPageIndex].PURTIME;
                    this.TRANNO = this.pagingDataList[this.currentPageIndex].TRANNO;
                }
                if (this.nextFlag) {
                    this.get_3006('3006');
                } else {
                    this.get_3006('3092');
                }
            } else {
                // 切换到下一页

                if (this.nextFlag) {
                    this.get_3006('3006');
                } else {
                    this.get_3006('3092');
                }
            }
        },
        searchData() {
            //this.isLoading = true;

            this.nextFlag = false;

            if (this.formData.months == '0') {
                this.masg = '6个月内账单';
                this.nextFlag = true;
            } else if (this.formData.months == '1') {
                this.masg = '7-12个月账单';
            } else if (this.formData.months == '2') {
                this.masg = '13-18个月账单';
            } else if (this.formData.months == '3') {
                this.masg = '19-24个月账单';
            }
            this.option = this.formData.currency; // 币种
            this.dateFlag = this.formData.months; // 月份
            this.getData();
        },
        async getData() {
            this.isLoading = true;
            const result_3054 = await this.get_3054();
            //this.isLoading = true;
            //const result_3053 = await this.get_3053();
            this.tableData = [];

            if (!result_3054) return false;
            //this.result_3053 = result_3053;

            this.tableData = result_3054.body.appBody.dataList || [];

        },
        async get_3054() {
            const appBody_3054 = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                OPTION: this.option,
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                QUERY: this.dateFlag,
            };
            const result_3054 = await get_3xxx(
                '3054',
                '卡片信用历史查询',
                appBody_3054,
                this,
                false,
            );
            if (!result_3054) return false;
            return result_3054;
        },
        async get_3053() {
            const appBody_3053 = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                COVERTTY: 0,
            };
            const result_3053 = await get_3xxx(
                '3053',
                '信用卡账单应还款金额查询',
                appBody_3053,
                this,
            );
            if (!result_3053) return false;
            return result_3053;
        },
    },
    filters: {
        // 到期还款日
        getNewDay(CLOSEDAY, ODUETIME) {
            const text = `${CLOSEDAY}`;
            const dateText = moment(text).format('YYYY-MM-DD');
            const dateTemp = dateText.split('-');
            const nDate = new Date(`${dateTemp[1]}-${dateTemp[2]}-${dateTemp[0]}`); // 转换为MM-DD-YYYY格式
            const millSeconds = Math.abs(nDate) + parseInt(ODUETIME) * 24 * 60 * 60 * 1000;
            const rDate = new Date(millSeconds);
            const year = rDate.getFullYear();
            let month = rDate.getMonth() + 1;
            if (month < 10) month = `0${month}`;
            let date = rDate.getDate();
            if (date < 10) date = `0${date}`;
            return `${year}-${month}-${date}`;
        },
        // 日期格式转换
        formatDate(val) {
            const text = `${val}`;
            return moment(text).format('YYYY-MM-DD');
        },
        // 卡号末四位自动补0
        formatCardend(val) {
            return val.toString().padStart(4, '0');
        },
        // 获取日期时间转换
        getFormatDate(time, date, date1) {
            // let res = "";
            // if (time && date) {
            //   res = `${moment(`${date}`).format("YYYY-MM-DD")} ${myMoment(
            //     time
            //   ).format("HH:mm:ss")}`;
            // } else if (date) {
            //   res = `${moment(`${date}`).format("YYYY-MM-DD")}`;
            // }
            // return res;
            let res = '';
            let str = '';
            let tmp = '';
            const timeStr = time.toString().trim();
            if (date !== 0) {
                tmp = `00000000${timeStr}`;
                tmp = tmp.substring(tmp.length - 8, tmp.length);
                str = tmp.substring(0, 2).concat(':').concat(tmp.substring(2, 4)).concat(':')
                    .concat(tmp.substring(4, 6));
            }
            let Str = '';
            if (date) {
                const dateStr = date.toString().trim();
                const month1 = Number(date1.substring(0, 2));
                const month2 = Number(dateStr.substring(4, 6));
                if (month1 - month2 === 11) {
                    const year = `${Number(dateStr.substring(0, 4)) - 1}`;
                    Str = year.concat('-').concat(date1.substring(0, 2)).concat('-').concat(date1.substring(2, 4));
                } else {
                    Str = dateStr.substring(0, 4).concat('-').concat(date1.substring(0, 2)).concat('-')
                        .concat(date1.substring(2, 4));
                }

                res = `${Str} ${str}`;
            }
            return res;
        },
        formateDate(val) {
            let text = '';
            if (val === '99999999') {
                text = '见单即付';
                return text;
            }
            return moment(val).format('YYYY-MM-DD');
        },
        TRANTYPDate(val) {
            this.TRANTYPEList.forEach((item) => {
                if ((`${val}`).trim() == i.code) {
                    return val + i.label;
                }
            });
            return val;
        },
    },
    components: {
        cardComponent,
    },
};
</script>

<style lang="scss" scoped>
.hisBillChecked {
    .clearfix {
        text-align: center;
        background: #f5f7fa;
        padding: 5px;
    }
    /deep/.el-card__header {
        padding: 0 !important;
    }
    .footer .el-button {
        margin-top: 16px;
    }
    .footer {
        text-align: center;
    }
    .arrearsQueryMain .el-row {
        // margin: 2px;
        // margin-bottom: 0;
        // padding: 0 6px;
    }
    .queryMainLeft {
        font-size: 14px;
    }
    .tab-header span {
        font-size: 18px;
    }
    .has-gutter th {
        column-span: 7 !important;
    }
    .tableTitle {
        width: 100%;
        height: 30px;
        border-bottom: none;
        line-height: 30px;
        color: #000;
    }
    .pagination {
        margin-top: 20px;
        text-align: right;
    }
    .foote {
        text-align: center;
        margin-bottom: 20px;
    }

    .btn_Box {
        width: 100%;
        text-align: right;
        //float: right;
    }
    .btmstyle {
        margin-left: 25px;
    }
}
</style>
